<template>
  <div>
    <div class="app-container">

      <div class="filter-container">
        <el-input  v-model="query.id" placeholder="文章ID" class="filter-item" style="width: 200px;margin-right: 5px;" ></el-input>
        <el-input  v-model="query.title" placeholder="文章标题" class="filter-item" style="width: 200px;margin-right: 5px;" ></el-input>
        <el-cascader placeholder="分类"  class="filter-item"
                     v-model="query.classifyId"
                     :options="classifies"
                     :props="{ expandTrigger: 'hover' ,value:'id',label:'name'}"
        >
        </el-cascader>

        <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
        <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
        <el-button @click="handleMultiSenc(1)" type="primary" class="filter-item">设置敏感</el-button>
        <el-button @click="handleMultiSenc(2)" type="primary" class="filter-item">恢复正常</el-button>
        <el-button @click="handleMultiDelete" type="primary" class="filter-item">删除</el-button>
      </div>

      <el-table
        height="calc( 100vh - 180px )"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        v-horizontal-scroll="'always'"
      >
        <el-table-column type="selection" width="45" />
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="classify_name" label="分类" min-width="120" />
        <el-table-column prop="title" label="标题" min-width="420" />
        <el-table-column prop="type" label="类型" min-width="50" />
        <el-table-column prop="is_sensitive_name" label="敏感" min-width="50" />
        <el-table-column prop="publish_at" label="发布时间" min-width="160" />
        <el-table-column prop="created_at" label="创建时间" min-width="160" />
        <el-table-column fixed="right" label="操作" min-width="60">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <!--				<el-button-->
            <!--				size="mini"-->
            <!--				type="text"-->
            <!--				@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pagination.pageSize"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>

    </div>
  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myRequest'

const urlArticleAdd = '/guard/article/add'
const urlArticleChange = '/guard/article/change'
const urlArticleLst = '/guard/article/pptLst'
const urlArticleDel = '/guard/article/del'
const urlArticleClassifyLst = '/guard/article/classify/lst'
export default {


  data() {
    return {
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      list:[],
      selectId: [],
      classifies:[{value:0,label:'全部'}],
      query:{
        id:'',
        title:'',
        classifyId:0,
        type:''
      },
      pagination:{
        page:1,
        pageSize:100,
        total:0,
      }
    }
  },
  methods: {

    handleMultiSenc(type) {
      if (this.selectId.length <= 0) {
        this.$message.error('请先选择项目！')
        return;
      }
      this.$confirm('确定要设置敏感吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.selectId
        myGet(urlArticleChange, {'id':id,'is_sensitive':type}).then(res => {
          if (res.status) {
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    handleMultiDelete() {
      if (this.selectId.length <= 0) {
        this.$message.error('请先选择项目！')
        return;
      }
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.selectId
        myGet(urlArticleDel, {id}).then(res => {
          if (res.status) {
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true
      let params = Object.assign(this.query,this.pagination)
      myGet(urlArticleLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    getArticleClassify(){
      myGet(urlArticleClassifyLst).then(res=>{
        if(res.status){
          this.classifies = res.data.records
        }
      })
    },
    handleEdit(index,row){
      let id = row.id
      this.$router.push(`/article/edit/${id}`)
    },

    handleDelete(index,row){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id
        myGet(urlArticleDel,{id}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    changeSwitch(row){

      myPost(urlArticleChange, {
        //is_top:row.is_top,
        //up_down:row.up_down,
        sort:row.sort,
        price:row.price,
        id:row.id,
      }).then(res => {
        if(res.status){
          this.$message.success(res.msg)
          this.getRecords()
        }
      })
    },

    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item => {
        this.selectId.push(item.id)
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page  = val
      this.getRecords();
    },
  },

  mounted() {
    this.getRecords()
    this.getArticleClassify()
  },
}
</script>

<style scoped>
.table-img{
  width: 50px;
  height: 50px;
}
</style>
